<!--
 * @Author: fishroom
 * @Date: 2021-08-23 22:43:02
 * @LastEditTime: 2021-09-02 13:55:03
 * @FilePath: \backstage\src\components\content\input\InputBox.vue
-->
<template>
  <div class="address-select wrap">
    <h1 class="text-center address-title iconfont">搜一搜&#xe60a;</h1>
    <div class="flex select-input-box ">
      <!-- 省份 -->
      <div class=" flex">
        <span>省份</span><i class="mr">:</i
        ><input-item :List="inputList" @tabClick="tabClick" />
      </div>
      <!-- 城市 -->
      <div class=" flex input-city">
        <span>城市</span><i class="mr">:</i
        ><input-two v-if="flag" :List="list" @ChildClick="ChildClick" />
        <input-item v-if="!flag" />
      </div>
      <!-- 区县 -->
      <div class=" flex input-county">
        <span>区县</span><i class="mr">:</i
        ><input-item v-if="isflag" :List="listChild" @tabClick="tabClick2" />
        <input-item v-if="!isflag" />
      </div>
    </div>
    <div class="selelt-box flex select-input-box">
      <!-- 类型 -->
      <div class="flex ">
        <span>类型</span><i class="mr">:</i
        ><TypeItem :List="typeList" @ChildClick="typeGetVal" />
      </div>
      <!-- 环境 -->
      <div class="flex  ">
        <span>环境</span><i class="mr">:</i
        ><TypeItem :List="eir" @ChildClick="backGetVal" />
      </div>
      <!-- 面积 -->
      <div class="flex  ">
        <span class="el-width">面积</span><i class="mr">:</i>
        <div class="inp-box flex">
          <input
            type="text"
            class="ipt-item area-input"
            v-model="min"
            placeholder="最小值"
          />
          <em class="mr">至</em>
          <input
            type="text"
            class="ipt-item area-input"
            v-model="max"
            placeholder="最大值"
          />
        </div>
      </div>
    </div>
    <div class="search-box selelt-box">
      <input
        type="button"
        class="search-item i-area-input"
        value="搜索"
        @click="propertyClick"
      />
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import InputItem from "./InputItem.vue";
import InputThree from "./InputThree.vue";
import InputTwo from "./InputTwo.vue";
import TypeItem from "./TypeItem.vue";

export default {
  components: { InputItem, InputTwo, InputThree, TypeItem },
  name: "InputBox",
  data() {
    return {
      flag: false,
      isflag: false,
      list: [],
      listChild: [],
      count: 0,
      dataList: [],
      min: "",
      max: "",
      obj: {
        provinceId: 0,
        cityId: 0,
        districtId: 0,
        typeId: 0,
        environmentId: 0,
        start: 0,
        end: 0,
        page: 1,
        limit: 8
      }
    };
  },
  computed: {
    inputList() {
      return this.$store.state.selectList;
    },
    typeList() {
      return this.$store.state.TypeList;
    },
    eir() {
      return this.$store.state.environment;
    }
  },
  methods: {
    ...mapActions(["getTypeItem", "getEvlItem", "getProQueryItem"]),
    tabClick(index, e, id) {
      this.obj.provinceId = id;
      this.flag = true;
      this.count = index;
      if (this.inputList[index]?.children) {
        this.list = [...this.inputList[index].children];
      }
    },
    ChildClick(index, e, id) {
      this.obj.cityId = id;
      this.isflag = true;
      if (this.inputList[this.count].children[index]?.children) {
        this.listChild = [
          ...this.inputList[this.count].children[index].children
        ];
      } else {
        this.listChild = [];
      }
    },
    tabClick2(index, e, id) {
      this.obj.districtId = id;
    },
    typeGetVal(id) {
      this.obj.typeId = id;
    },
    backGetVal(id) {
      this.obj.environmentId = id;
    },
    propertyClick() {
      this.obj.start = this.min;
      this.obj.end = this.max;
      this.getProQueryItem(this.obj);
    }
  },
  created() {
    this.getEvlItem();
    this.getTypeItem();
  }
};
</script>

<style lang="scss">
.address-select {
  width: 900px;
  // max-width: 1400px;
  line-height: 2.4;
}

.address-title {
  font-size: 30px;
  font-weight: bold;
  color: #607eb9;
}

.select-input-box {
  justify-content: space-between;
}

.selelt-box {
  margin-top: 30px;
}

.area-input {
  max-width: 24.2%;
  min-width: 55px;
  font-size: 12px;
  padding: 0 5px;
}

.input-city {
  justify-content: center;
}

.input-county {
  justify-content: flex-end;
}

.i-area-input {
  width: 267px;
}

.search-box {
  text-align: center;
}

.search-item {
  padding: 12px 20px;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  transition: 0.1s;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  border-radius: 4px;

  &:hover {
    background: #fff;
    border-color: #409eff;
    color: #409eff;
  }
}

.inp-box {
  position: relative;
  // min-width: 40%;
  // max-width: 100%;
  width: 134px;
}

.el-width {
  min-width: 32px;
}
</style>
